<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
        <i class="el-icon-download"/>
        <!-- <a :href="OSS_PATH +
        '/excel/%E8%AF%BE%E7%A8%8B%E5%88%86%E7%B1%BB%E5%88%97%E8%A1%A8%E6%A8%A1%E6%9D%BF.xls'">点击下载模版</a>   这个是阿里oss的地址 -->
        <a :href="'static/01.xlsx'">点击下载模版</a>   <!-- 换成了本地的excel，放在工程路径的static的路径下 -->
        </el-tag>
        </el-form-item>
        <el-form-item label="选择Excel"><!-- ref 唯一标识 ，:auto-upload自动提交，手动需要点下上传，
        on-success上传成功执行方法，:on-error失败方法，:disabled按钮是否禁用，:limit现在上传文件个数，:action上传接口地址 -->
        <el-upload
        
        ref="upload" 
        :auto-upload="false"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError"
        :disabled="importBtnDisabled"
        :limit="1"
        :action="BASE_API+'/eduservice/subject/addSubject'"
        name="file"
        accept="application/vnd.ms-excel"> <!-- 指定上传文件格式，目前是微软的excel -->
        
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button
        :loading="loading"
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload">{{ fileUploadBtnText }}</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
   </div>
</template>

<script>
export default {
     data() {
         return {
            BASE_API: process.env.BASE_API, // 接口API前面的
            // OSS_PATH: process.env.OSS_PATH, // 阿里云OSS地址 ，提供模板的远程下载地址，默认用本地服务器，所以去掉
            fileUploadBtnText: '上传到服务器', // 按钮文字
            importBtnDisabled: false, // 按钮是否禁用,
            loading: false
                }
            },
    methods:{
        //点击按钮上传文件到接口里面
        submitUpload() {   //这个不是ajax提交，就是一个form表单的提交

            this.importBtnDisabled = true
            this.loading = true  //现在加载的动态图标
            //原生js写法：document.getElementById("upload").submit()
            this.$refs.upload.submit()

        },
        //上传成功
        fileUploadSuccess(response) {
            this.loading = false  
            this.$message({
                type: 'success',
                message: response.message
                          }) 
        //完成后需要跳转页面到列表
        this.$router.push({path:'/subject/list'}) //url上的路径
        },
        //上传失败
        fileUploadError() {

            this.fileUploadBtnText = '导入失败'
            this.loading = false
            this.$message({
                 type: 'error',
                 message: '导入失败'
})

        }


            }
                }
</script>